import React from "react";
import {createStyles} from "antd-style";
import {useFileDiveStore} from "@/pages/HomePage/FileDive/FileDiveStore.ts";
import {LoadingOutlined} from "@ant-design/icons";
import Empty from "antd/es/empty/empty";
import {Pagination, Spin} from "antd";
import FileButton from "@/pages/HomePage/FileDive/FileDiveView/FileButton.tsx";
import FilePreviewDrawer from "@/pages/HomePage/FileDive/FileDiveView/FilePreviewDrawer";

const useStyles = createStyles(({css, token, isDarkMode}) => {
    return {
        container: css`
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
            
            // 配置加载图形，这个图形在正中间生成
            .loading-spin {
                transition: opacity .2s;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: block;
                background-color: transparent;
                backdrop-filter: blur(20px);
                opacity: 0;
                pointer-events: none;

                & > * {
                    position: fixed;
                    top: 50%;
                    right: 50%;
                }
            }

            // 加载页面
            .loading {
                opacity: 1;
                pointer-events: auto;
            }
        `,
        emptyPage: css`
            position: relative;
            display: grid;
            place-content: center;
        `,
    }
})

/**
 * 文件树浏览组件
 */
const FileDiveView: React.FC = () => {
    const {styles} = useStyles()
    const {content, loading, pageCurrent, pageSize, total, setPageCurrent, setPageSize} = useFileDiveStore()

    if (content == null || content.length == 0) {
        return (
            <div className={styles.emptyPage}>
                <Empty/>
            </div>
        )
    }

    return (
        <>
            <div className={styles.container}>
                <div className={"loading-spin " + (loading ? "loading" : "")}>
                    <Spin indicator={<LoadingOutlined spin/>} size="large"/>
                </div>
                <ul>
                    {
                        content.map((item) => {
                            return (
                                <FileButton
                                    key={item.path}
                                    fileObj={item}
                                />
                            )
                        })
                    }
                </ul>
                <Pagination
                    style={{
                        display: total < pageSize ? "none" : undefined,
                    }}
                    align="center"
                    current={pageCurrent}
                    onChange={(current, size) => {
                        setPageCurrent(current)
                        setPageSize(size)
                    }}
                    total={total}
                    pageSize={pageSize}
                />
            </div>
            <FilePreviewDrawer/>
        </>
    )
}

export default FileDiveView
